<template>
  <border-box title="附加信息">
    <div style="color:red;font-size: 10px;">添加的前三个附加信息，对应发布新闻网中的主讲人，举办时间，活动地点</div>
    <div class="item" v-for="(item,index) in list" :key="index">
      <a-input class="item-half" placeholder="选项名称" v-model="item.attachName"></a-input>
      <a-input class="item-half" placeholder="选项值" v-model="item.attachContent"></a-input>
      <a-icon @click="deleteLast" class="item-icon" type="minus-circle" style="color:red;font-size:20px;"/>
    </div>
    <a-button type="dashed" @click="add" style="display:inherit;margin: auto">
      <a-icon type="plus" class="item-icon" style="color:#1890ff;font-size:20px;"/>
      新增附加信息
    </a-button>
  </border-box>
</template>

<script>
  //附加信息
  import BorderBox from "./BorderBox";
  import {getAction} from "../../api/manage";

  export default {
    name: "AdditionalInfo",
    components: {BorderBox},
    props: ['params'],
    data() {
      return {
        list: [],
        current: {
          attachName: '',
          attachContent: ''
        }
      }
    },
    created() {
      this.queryInfo();
    },
    methods: {
      queryInfo() {
        getAction('task/taskInfo/queryTaskContentAdditionalInfo', this.params).then(res => {
          if (res.success) {
            this.list = res.result || [];
          }
        })
      },
      selfValidate() {
        return new Promise((resolve, reject) => {
          const res = this.list.filter(item => item.attachName && item.attachContent);
          resolve({key: 'contentAddition', value: res})
        })
      },
      deleteLast() {
        this.list.pop();
      },
      add() {
        this.list.push({
          attachName: '',
          attachContent: ''
        });
      }
    }
  }
</script>

<style scoped>
  .item {
    display: flex;
    align-items: center;
  }

  .item-half {
    flex: 1;
    margin-right: 5px;
  }

  .item-icon {
    cursor: pointer;
  }

</style>